<template>
  <div class="container">
    <!-- 左边 DIV -->
    <div class="left">
      <p>这是左边的内容。</p>
      <p>这段文字会随着屏幕大小的变化而自动调整宽度。</p>
      <p>测试文字：Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel nisi nec libero venenatis malesuada.
      </p>
      <p>更多测试文字...</p>
    </div>

    <!-- 右边 DIV -->
    <div class="right">
      <p>这是右边的内容。</p>
      <p>宽度固定为 100px。</p>
      <p>测试文字...</p>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';

onMounted(() => {
  // 组件挂载后执行的逻辑（如有需要）
});
</script>

<style scoped>
/* 使用 flexbox 实现左右布局 */
.container {
  display: flex;
  height: 100vh; /* 让容器占满整个视口高度 */
  margin: 0; /* 移除外边距 */
  padding: 0; /* 移除内边距 */
  width: 100%;
}

/* 左边 DIV 样式 */
.left {
  flex-grow: 1; /* 自动扩展以填充剩余空间 */
  background-color: #f0f0f0; /* 背景颜色 */
  padding: 20px; /* 内边距 */
  overflow-y: auto; /* 如果内容过多，允许滚动 */
}

/* 右边 DIV 样式 */
.right {
  width: 100px; /* 固定宽度 */
  background-color: #ccc; /* 背景颜色 */
  padding: 20px; /* 内边距 */
  overflow-y: auto; /* 如果内容过多，允许滚动 */
}

/* 重置 body 的默认样式 */
body {
  margin: 0; /* 移除 body 的默认外边距 */
  padding: 0; /* 移除 body 的默认内边距 */
}
</style>